<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="../JustWalking.js"></script>
<script type="text/javascript" src="JustWalking.zoom.js"></script>
<style type="text/css">
/*原图样式*/
.smallClass{border:1px solid black;float:left;position:relative;padding:0px;cursor:pointer;}

/*显示大图div样式，不能改名，此样式名写入js*/
.JSWK_ZoomDIV {z-index: 100;position: absolute;top:0px;left:0px;width:200px;height:200px;background:#ffffff;border:1px solid #CCCCCC;display:none;text-align: center;overflow: hidden;}

/*原图上的div游标样式，不能改名，此样式名写入js*/
.JSWK_ZoomPuP {z-index: 10;display:none;position: absolute;top:0px;left:0px;width: 50px;height: 50px;border: 1px solid #aaa;background: #ffffff url(images/zoom.gif) 50% top  no-repeat;;opacity: 0.5;-moz-opacity: 0.5;-khtml-opacity: 0.5;filter: alpha(Opacity=50);}
</style>
</head>
<body>
 <div style="width:100%; clear:both;">
 	<div id="ImgSmallDiv" class="smallClass" style="margin-left:500px;"><img src="images/shoe4_small.jpg"  zoomimg="images/shoe4_big.jpg"></div>
 </div>
  <br/><br/><br/> 
<div style="width:100%;clear:both;">
	<div id="ImgSmallDiv" class="smallClass" style="margin-left:500px;"><img src="images/shoe1_small.jpg"  zoomimg="images/shoe1_big.jpg"></div>
 </div>
  <br/> <br/> <br/> 
  <div style="width:100%;clear:both;">
	<div id="ImgSmallDiv" class="smallClass" style="margin-left:500px;"><img src="images/shoe3_small.jpg"  zoomimg="images/shoe3_big.jpg"></div>
 </div>
 <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/>

 <script type="text/javascript">

	var setValues={
		/*以下属性名称不能更改*/
		zoomWidth:300,/*放大区域宽*/
		zoomHeight:300,/*放大区域高*/
		zoomOffset:50,/*放大区域与原图距离*/
		zoomSide:"left"/*放大区域是在原图的左边还是右边 left or right*/
	};
	/*JSWK.zoom(Jid("ImgSmallDiv1"),setValues);当只有一个对象使用放大效果时，直接使用该方法(setValues,为可选参数，不填时，则使用系统默认值)*/

/*当有多个对象需要使用放大效果时,先获取对象集，然后用each方法对每个对象初始化效果(setValues,为可选参数，不填时，则使用系统默认值)*/
	var itImgs=Jids("ImgSmallDiv");
	itImgs.each(function(x){
		JSWK.zoom(itImgs[x],setValues);
	});


</script>
</body>
</html>
